<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 1.块级元素默认的width是和浏览器一样的 -->
    <!-- 2.行内元素设置长度  宽度不起作用，默认和内容宽度一样 -->
    <!-- 3.行内元素只能放文字和行内元素  a稍微特殊 -->
    <!-- 4. p h1 dt 里面不能放块级元素 -->
    <!-- 5.行内块级元素 -->
    <style>
        div {
            background-color: red;
        }

        ul li {
            background-color: gray;
        }

        p {
            background-color: green;
        }

        span {
            color: red;
        }

        .bocktoinline {
            display: inline;
        }

        .inlinetoblock {
            display: block;
            width: 100px;
        }

        .inlinetoinlinblock {
            display: inline-block;
            width: 200px;
            margin-right: 100px;
        }
    </style>
</head>

<body>
    <div>sakfkl</div>
    <ul>
        <li>1</li>
        <li>3</li>
        <li>3</li>
    </ul>
    <p>谢谢</p>

    <span>答复</span><span>safs</span><a href="http://www.baidu.com">霆锋</a>

    <!-- 行内块级元素,既有行内元素的特点，又有块级元素的特点 -->
    <input type="text" style="height: 100px; ">
    <input type="text">
    <input type="text">
    <img style="width: 200px; height: 200px;"
        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590556716845&di=7b83c3489223c754c5283f03241ef2d0&imgtype=0&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3175508956%2C2902264390%26fm%3D214%26gp%3D0.jpg"
        alt="">
    <td></td>

    <div class="bocktoinline">123</div>
    <div class="bocktoinline">4352</div>
    <div class="bocktoinline">2323</div>
    <span class="inlinetoblock">我想要</span>
    <span class="inlinetoblock">怒放的</span>
    <span class="inlinetoblock">生命</span>

    <a class="inlinetoinlinblock" href="#">第一个链接</a> <a class="inlinetoinlinblock" href="#">第二个链接</a> <a
        class="inlinetoinlinblock" href="#">第三个链接</a>

</body>

</html>